<template>
    <el-autocomplete :style="width" v-model="infoName" @blur="checkCurrentId" :trigger-on-focus="true"
                     :fetch-suggestions="querySearchAsync" @mouseenter.native="isMouseEnter=true"
                     @mouseleave.native="isMouseEnter=false" :placeholder="placeholder"
                     :disabled="disabled"
                     @select="handleSelectAn">
        <i class="el-input__icon" :class="infoName&&isMouseEnter&&!disabled?'el-icon-error':'el-icon-edit'"
           @click="handleClear" slot="suffix"></i>
        <template slot-scope="props">
            <div class="name">{{ props.item.containerType }}</div>
        </template>
    </el-autocomplete>
</template>

<script>
    import CommonSearchInput from './common'
    import {
        getContainerTypeList
    } from "@/api/containerType/containerType";
    // 箱型搜索组件
    export default {
        mixins: [CommonSearchInput],
        props: {
            width: ''
        },
        methods: {
            // 异步搜索信息
            querySearchAsync(queryString, cb) {
                getContainerTypeList({
                    search_LIKE_containerType: queryString,
                    'iDisplayLength': this.iDisplayLength
                }).then((reponse) => {
                    cb(reponse.data.aaData)
                })
            },
            handleClear() {
                if (this.infoName && !this.disabled) {
                    this.infoName = ''
                    this.$emit('select', '')
                    this.$emit('selectName', '')
                }
            },
            handleSelectAn(item) {
                this.$emit('matchRecord', Object.assign({}, item))
                this.$emit('select', item.containerType)
                this.$emit('selectName', item.containerType)
                this.$emit('change', item.containerType)
                this.infoName=item.containerType
            }
        }

    }

</script>
